<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除浮动</title>
    <style>
        .con, .con2, .con3{
            width: 300px;
            border: 1px solid #000;
            margin: 100px auto 0;
        }
/*        .con2{
            overflow: hidden;
        }*/
        .con a{
            width: 50px;
            height: 50px;
            display: inline-block;
            line-height: 50px;
            margin: 10px;
            text-align: center;
            background-color: gold;
            text-decoration: none;
        }
        .con2 a{
            width: 50px;
            height: 50px;
            background-color: gold;
            margin: 10px; 
            text-align: center;
            line-height: 50px;
            text-decoration: none;
            float: left;
        }
        .clearfix:after,.clearfix:before{ 
            content: "";
            display: table;
        }
        .clearfix:after{ 
            clear:both;
        }
        .clearfix{
            zoom:1;
        }
    </style>
</head>
<body style="height: 2000px;">
    <div class="con">
        <a href="">1</a>
        <a href="">2</a>
        <a href="">3</a>
        <a href="">4</a>
        <a href="">5</a>
        <a href="">6</a>
        <a href="">7</a>
        <a href="">8</a>
    </div>
    <div class="con2 clearfix">
        <a href="">1</a>
        <a href="">2</a>
        <a href="">3</a>
        <a href="">4</a>
        <a href="">5</a>
        <a href="">6</a>
        <a href="">7</a>
        <a href="">8</a>
    </div>
</body>
</html>